<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>首页</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=DC4790c8884d7a47c4f37090a46b2a1f"></script>
<script type="text/javascript" src="js/data.js"></script>
<script type="text/javascript" src="js/plugs/layer/layer.min.js"></script>

</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var map = new BMap.Map("container");          // 创建地图实例
map.centerAndZoom("北京",12);  

// map.addEventListener("click", function(e){
// 	var p = new BMap.Point(e.point.lng,e.point.lat) ;
// 	var m = new BMap.Marker(p);        // 创建标注    
// 	map.addOverlay(m);
// 	alert(e.point.lng + ":" + e.point.lat)
// });

map.addControl(new BMap.NavigationControl());   
map.addControl(new BMap.ScaleControl());    
map.addControl(new BMap.OverviewMapControl());    
map.addControl(new BMap.MapTypeControl()); 

//设置本地城市
function myFun(result){
    var cityName = result.name;
    map.setCenter(cityName);
}
var myCity = new BMap.LocalCity();
myCity.get(myFun);


map.enableScrollWheelZoom();    //启用滚轮放大缩小，默认禁用
map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用

var last_point = null ;
//百度地图API功能
var sContent =
"<h4 style='margin:0 0 5px 0;padding:0.2em 0'>天安门</h4>" + 
"<img style='float:right;margin:4px' id='imgDemo' src='http://app.baidu.com/map/images/tiananmen.jpg' width='139' height='104' title='天安门'/>" + 
"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>天安门坐落在中国北京市中心,故宫的南侧,与天安门广场隔长安街相望,是清朝皇城的大门...</p>" + 
"</div>";



for(var i = 0 ; i < 20 ; i++){
	last_point = null ;
	var g = mapData["group_" + i] ;
	if(!g){
		break ;
	}
	
	for(var j = 0 ; j < g.length  ; j++){
		var data = g[j];
		var p = new BMap.Point(data.x,data.y) ;
		var m = new BMap.Marker(p); 
		m.d = data
		m.addEventListener("click", function(){          
// 			   this.openInfoWindow(infoWindow);
// 			   //图片加载完毕重绘infowindow
// 			   document.getElementById('imgDemo').onload = function (){
// 			       infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
// 			   }
			//alert("x:" + this.d.x + ",y:" + this.d.y)
			$.layer({
			    type : 2,
			    title : '查看图片列表',
			    iframe : {src : 'wan/photo_list.htm'},
			    area : ['900px' , '500px'],
			    offset : ['10px',''],
			    border : [0]
			});
		});
		map.addOverlay(m)
		
		if(last_point != null) {
			var pl = new BMap.Polyline([last_point,p ],{strokeColor:"red", strokeWeight:6, strokeOpacity:1});
			map.addOverlay(pl);
		}
		last_point = p ;
	}
	
}

	
	
	
	
	var p4 = new BMap.Point(120.133351,30.296917);
	var m4 = new BMap.Marker(p4);
	
	var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象
	map.addOverlay(m4);
	m4.addEventListener("click", function(){          
	   this.openInfoWindow(infoWindow);
	   //图片加载完毕重绘infowindow
	   document.getElementById('imgDemo').onload = function (){
	       infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
	   }
	});
	
	
	
	
</script>
</body>
</html>